<template>
  <div class="searchbox">
    <img src="../assets/nav-img/logo.svg" alt="" class="searchbox-logo" />
    <el-input
      class=""
      v-model="input"
      placeholder="搜索位置、事件……"
      @keyup.enter="queryEvent"
    ></el-input>
    <img
      src="../assets/nav-img/search.svg"
      alt=""
      class="searchbox-search"
      @click="queryEvent"
    />
  </div>
</template>
<script>
var eventSource = new ol.source.Vector({
  wrapX: false,
});
import { Query } from '../../utils/queryPoint.js';
export default {
  name: 'search',
  data() {
    return {
      usertype: '',
      input: '',
    };
  },
  created() {
    this.usertype = this.$cookies.get('usertype');
  },
  methods: {
    queryEvent() {
      var MyService = 'guanggu';
      //创建图层对象, 将数据源添加到图层图像
      var eventLayer = new ol.layer.Vector({
        source: eventSource,
      });
      var map = this.$store.state.map;
      map.addLayer(eventLayer);
      // map.on('click', addPopup);
      //判断当前事件图层是否有要素数据
      if ((eventSource.revision_ = 0)) {
        eventSource.clear();
      }
      //获取关键字
      const keywords = this.input;
      if (!keywords) {
        alert('请输入事件查询关键字');
        return;
      }
      //新建查询
      const query_sql = new Query({
        service: MyService,
        layerID: '3',
        host: 'localhost',
        port: 6163,
      });
      const sql = `事件类型 LIKE '%${keywords}%' OR 发生地点 LIKE '%${keywords}%' OR 处理状态 LIKE '${keywords}'`;
      query_sql.queryBySQL(sql, (result) => {
        if (result.TotalCount == 0) return alert('没有查询到相应事故');

        //初始化Zondy.Format.PolygonJSON类
        var format = new Zondy.Format.PolygonJSON();
        //将MapGIS要素JSON反序列化为ol.Feature类型数组
        var features = format.read(result);
        // console.log('bbb', features);
        // const data = result.SFEleArray;
        // console.log(data);

        //获取查询的mapGIS点对象
        if (this.usertype == 'user') {
          //未登录或普通用户
          features.forEach((element) => {
            //创建openlayer点对象, 设置属性
            var eventFeature = new ol.Feature({
              geometry: new ol.geom.Point([
                element.getGeometry().getCoordinates()[0][0],
                element.getGeometry().getCoordinates()[0][1],
              ]),
            });
            var Icon = new ol.style.Style({
              image: new ol.style.Icon(
                /** {olx.style.IconOptions} 类型 */
                {
                  anchor: [0.5, 60],
                  anchorOrigin: 'top-right',
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  offsetOrigin: 'top-right',
                  // offset:[0,10],
                  //图标缩放比例
                  scale: 0.5,
                  //透明度
                  opacity: 0.75,
                  //图标的url
                  src: '../../img/blueIcon.png',
                }
              ),
            });
            eventFeature.setStyle(Icon);
            eventSource.addFeature(eventFeature);
          });
        } else if (this.usertype == 'traffic' || this.usertype == 'admin') {
          //交管或管理员
          features.forEach((element) => {
            //创建openlayer点对象, 设置属性
            var eventFeature = new ol.Feature({
              geometry: new ol.geom.Point([
                element.getGeometry().getCoordinates()[0][0],
                element.getGeometry().getCoordinates()[0][1],
              ]),
            });
            var Icon = new ol.style.Style({
              image: new ol.style.Icon(
                /** {olx.style.IconOptions} 类型 */
                {
                  anchor: [0.5, 60],
                  anchorOrigin: 'top-right',
                  anchorXUnits: 'fraction',
                  anchorYUnits: 'pixels',
                  offsetOrigin: 'top-right',
                  // offset:[0,10],
                  //图标缩放比例
                  scale: 0.5,
                  //透明度
                  opacity: 0.75,
                  //图标的url
                  src: '../../img/blueIcon.png',
                }
              ),
            });
            eventFeature.setStyle(Icon);
            eventSource.addFeature(eventFeature);
          });
        }
      });
    },
    queryClear() {
      eventSource.clear();
      this.input = '';
    },
  },
};
</script>
<style>
.searchbox {
  position: absolute;
  margin-top: 15px;
  margin-left: 15px;
  z-index: 1;
}
.searchbox .el-input__inner {
  width: 300px;
  border-radius: 50px;
  padding: 0 48px;
  font-size: 17px;
  box-shadow: 5px 5px 4px rgba(0, 0, 0, 0.6);
}
.searchbox-logo {
  position: absolute;
  top: -3px;
  left: 5px;
  z-index: 1;
}
.searchbox-search {
  position: absolute;
  top: 3px;
  left: 260px;
  cursor: pointer;
}
</style>
